<template>
  <a-drawer v-model:open="open"
            :keyboard="false"
            :mask-closable="false"
            width="50%"
            footer=""
            wrap-class-name="full-modal"
            @close="handleClose"
            @cancel="handleClose">
    <template #title>
      <div class="flex justify-center fz18">离船申请详情({{ itemObj.shenPiZhuangTai }})
      </div>
    </template>
    <div class="content-body">
      <a-row :gutter="16" class="mt20">
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw mb5"><span class="mr6">离船申请单号：</span><span>{{ itemObj.shenQingDanHao }}</span>
          </div>
          <div class="gutter-box fw mb5"><span class="mr6">所在船舶：</span><span>{{ itemObj.suoZaiChuanBo }}</span>
          </div>
          <div class="gutter-box fw mb5"><span class="mr6">船员姓名：</span><span>{{ itemObj.chuanYuanMing }}</span>
          </div>
          <div class="gutter-box fw mb5"><span class="mr6">计划下船开始日期：</span><span>{{
              itemObj.xiaChuanKaiShiRiQi
            }}</span></div>
          <div class="gutter-box fw mb5"><span class="mr6">预计下船结束日期：</span><span>{{
              itemObj.xiaChuanJieShuRiQi
            }}</span></div>
          <div class="gutter-box fw mb5"><span class="mr6">申请日期：</span><span>{{ itemObj.shengQingRiQi }}</span>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw mb5"><span class="mr6">职位：</span><span>{{ itemObj.zhiWei }}</span></div>
          <div class="gutter-box fw mb5"><span class="mr6">上船日期：</span><span>{{ itemObj.shangChuanRiQi }}</span>
          </div>
          <div class="gutter-box fw mb5"><span class="mr6">计划下船结束日期：</span><span>{{
              itemObj.xiaChuanJieShuRiQi
            }}</span></div>
        </a-col>
        <a-divider></a-divider>
        <a-col class="gutter-row" :span="24">
          <div class="gutter-box fw flex justify-content-between">
            <span class="mr6">单据进度：<span
                :class="[itemObj.liuChengYeWuList[0].shenPiZhuangTai !='审批中'?'red':'green']">({{ itemObj.liuChengYeWuList[0].shenPiZhuangTai }})</span></span><span></span>
          </div>
          <div class="process-comment-container">
            <div class="process-item" style="margin-bottom: 20px;" v-for="(item,index) in itemObj.liuChengYeWuList" :key="index">
              <div class="circle" style="position: relative; z-index: 999;">
                <div v-if="item.jieDianCaoZuo=='同意'"><img class="process-start" src="/imgs/pass.svg"></div>
                <div v-else-if="item.jieDianCaoZuo=='拒绝'"><img class="process-start" src="/imgs/return.svg"></div>
                <div v-else><img class="process-start" src="/imgs/null.svg"></div>
                <div class="comment-fa-line" style="z-index: 1;height: 269px;"></div>
              </div>
              <div class="process-content">
                <div class="process-header">
                  <span class="process-status"><b class="ng-binding">{{ item.jueSeMing }}</b></span>
                  <span class="application-date ng-binding">{{ item.updateTime }}</span>
                </div>
                <div class="process-body" style="margin-left: 20px;">
                  <div v-if="item.shiFouShenPi=='是'">
                    {{ item.shenPiYiJian }}
                  </div>
                  <div class="flex-c align-center ng-scope mt10">
                    <div class="flex-row align-center ng-scope">
                      <div class="user-photo">
                        <img src="/imgs/default-user.png"
                             class="ng-scope"></div>
                      <div><span class="name ng-binding">
                      <span ng-if="applicantInfo.userName!=='系统'"
                            class="ng-binding ng-scope mr3 ml3">{{ item.shenPiRen }}</span>
                      </span>
                        <span class="red" v-if="item.jieDianCaoZuo =='拒绝'">（拒绝）</span>
                        <span class="green" v-else-if="item.jieDianCaoZuo =='同意'">（同意）</span>
                        <span class="c666" v-else>（未审批）</span>
                      </div>
                    </div>
                    <div class="mt10" v-if="currentObj.id == item.id && showFlag && item.shiFouShenPi=='否'">
                      <a-textarea v-model:value="item.shenPiYiJian" placeholder="请填写" maxlength="400"></a-textarea>
                      <div class="mt10">
                        <a-button type="primary" @click="handleReturn(item)" size="small" danger class="mr10">拒绝</a-button>
                        <a-button type="primary" size="small" @click="handlePass(item)">同意</a-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-drawer>
</template>
<script setup>
const open = ref(false)
const currentId = ref("")
const currentObj = ref({})
const showFlag = ref(false)
const itemObj = ref({
  liuChengYeWuList: [{shenPiZhuangTai: ""}]
})

const handleClose = () => {
  open.value = false;
}

const handleReturn = async (item) => {
  const resp = await useShenPiLiChuanShenQingApi({
    id: item.id,
    jieDianCaoZuo: "拒绝",
    shenPiYiJian: item.shenPiYiJian
  })
  const resp2 = await useGetLiChuanShenQingApi(currentId.value)
  itemObj.value = resp2.data

}

const handlePass = async (item) => {
  const resp = await useShenPiLiChuanShenQingApi({
    id: item.id,
    jieDianCaoZuo: "同意",
    shenPiYiJian: item.shenPiYiJian
  })

  const resp2 = await useGetLiChuanShenQingApi(currentId.value)
  itemObj.value = resp2.data
}


const handleOpen = async (id) => {
  open.value = true;
  currentId.value = id
  const resp = await useGetLiChuanShenQingApi(id)
  itemObj.value = resp.data
  const filterObj = resp.data.liuChengYeWuList.filter(c => c.shiFouShenPi == '否')
  if (filterObj.length > 0) {
    currentObj.value = filterObj[0]
    if(currentObj.value.shenPiZhuangTai != '审批中'){
      showFlag.value = false
      return
    }
    var roleids = useStore.userState().roles.map(c => c.id)
    showFlag.value = roleids.findIndex(c => c == currentObj.value.jueSeId)!=-1
  }
}


defineExpose({
  handleOpen
})
</script>
<style lang="scss">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    border-radius: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    border-radius: 0;
    padding: 0px;
  }

  .ant-modal-body {
    flex: 1;
  }

  .content-body {
    padding: 20px 24px;
  }

  .gutter-box {
    margin-bottom: 10px;
  }
}

</style>
